<template>

    <div class='index'>
        <div class="left">
            <h3>小程序</h3>
            <button @click="search.num++">{{search.num}}+1</button>
            <ul>
                <li
                        v-for="(item,index) in nav"
                        :key="`nav_${index}`"
                        @click="addPageComponent(item)"
                >
                    {{item.name}}
                </li>
            </ul>
        </div>
        <div class="content">

            <draggable class="list-group" :list="show" group="group"
                       :style="`flex:${layoutArr[layoutChose].layout[0]} 0 0`">
                <RenderPage
                        :page-components="[element]"
                        class="list-group-item"
                        v-for="(element, index) in show"
                        :key="element.i + index"
                >
                </RenderPage>
            </draggable>
            <draggable class="list-group" :list="show2" group="group"
                       :style="`flex:${layoutArr[layoutChose].layout[1]} 0 0`">
                <RenderPage
                        :page-components="[element]"
                        class="list-group-item"
                        v-for="(element, index) in show2"
                        :key="element.i + index"
                >
                </RenderPage>
            </draggable>
            <draggable class="list-group" :list="show3" group="group"
                       :style="`flex:${layoutArr[layoutChose].layout[2]} 0 0`">
                <RenderPage
                        :page-components="[element]"
                        class="list-group-item"
                        v-for="(element, index) in show3"
                        :key="element.i + index"
                >
                </RenderPage>
            </draggable>

        </div>
        <div class="right">
            <h3>排序</h3>
            <div
                    class="layout-item"
                    v-for="(item,index) in layoutArr"
                    :key="`layout_${index}`"
                    :class="index === layoutChose ? 'layout-chose':''"
                    @click="changeLayout(index)"
            >
                {{item.label}}
            </div>
        </div>
    </div>
</template>

<script>

    import draggable from "vuedraggable";
    import TimeBox from "../components/timeBox";
    import RenderPage from "../components/renderPage";
    import BoxFirst from "../components/box1";

    export default {
        name: "index",
        components: {draggable, TimeBox, RenderPage, BoxFirst},
        provide(){
            console.log(this.search,'0123');
            return {
                search: {
                    num:this.search
                }
            }
        },
        data() {
            return {
                search: {num:0},
                nav: [],
                len: 0,
                show: [],
                show2: [],
                show3: [],
                layoutChose: 0,
                layoutArr: [
                    {
                        type: 1,
                        label: '1-2-1',
                        layout: ['25%', '50%', '25%']
                    }, {
                        type: 2,
                        label: '1-1-1',
                        layout: ['33.33%', '33.33%', '33.33%']
                    }, {
                        type: 3,
                        label: '1-1-2',
                        layout: ['25%', '25%', '50%']
                    }, {
                        type: 4,
                        label: '2-1-1',
                        layout: ['50%', '25%', '25%']
                    }, {
                        type: 5,
                        label: '1',
                        layout: ['100%', '100%', '100%']
                    },{
                        type:6,
                        label: '1-2',
                        layout: ['33.33%','66.66%']
                    }
                ]
            }
        },
        created() {
            this.initPage();
        },
        methods: {
            /**
             *@description 初始化页面
             */
            initPage() {
                let arr = [
                    {
                        name: "普通盒子",
                        template: 'box-first',
                        i: 0
                    }, {
                        name: "时间盒子",
                        template: 'time-box',
                        i: 1
                    }
                ];
                this.nav = arr;
            },
            addPageComponent(val) {
                let len = this.len;
                this.len++;
                let show = 'show'
                switch (len % 3) {
                    case 1:
                        show = 'show2'
                        break;
                    case 2:
                        show = 'show3'
                        break;
                    default:
                        break;
                }
                this[show].push(val);
            },
            changeLayout(index) {
                this.layoutChose = index;
            }
        }
    }
</script>

<style>
    .index {
        /*display: flex;*/
    }

    .left {
       float: left;
        border-right: 1px solid #2c3e50;
        width: 120px;
        margin-right: -10px;
    }

    .content {
        flex: 1;
        display: flex;
        /*flex-wrap: wrap;*/
        margin: 0 150px;
        /*position: relative;*/
    }

    .list-group {
        /*min-height: 100px;*/
        background-color: aqua;
        /*margin: 10px;*/
    }

    .right {
       float: right;
        width: 120px;
        margin-left: -10px;
    }

    ul {
        margin: 0;
        padding: 0;
    }

    ul li {
        list-style: none;
        cursor: pointer;
        padding: 10px;
        margin: 10px;
        background-color: antiquewhite;
        text-align: center;
    }

    .right .layout-item {
        padding: 10px 15px;
        margin: 10px;
        background-color: antiquewhite;
        cursor: pointer;
    }

    .right .layout-chose {
        background-color: brown;
        color: #ffffff;
        font-weight: bold;
    }

    .list-group-item {
        border: 1px solid darkblue;
        height: 120px;
    }

    .render-page {
        padding: 10px;
        margin: 10px;
        box-sizing: border-box;
    }
</style>